<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    layout="horizontal"
    class="AsteriskAfter newEditStyle rightDrawerWithoutCol"
  >
  <!-- ECU名称 -->
    <a-form-model-item :label="$t('ecuName')" prop="ecu">
      <a-select
        v-model="form.ecu"
        allow-clear
        showSearch
        :filter-option="false"
        :placeholder="$t('pleaseSelect') + $t('lingjian')"
        style="width: 100%"
        @search="getEcuList"
        :notFoundContent="isSearch ? $t('noData') : $t('ecuNameSearch')"
      >
        <a-select-option
          v-for="item in ecuList"
          :key="item.ecuModuleId"
          :value="`${item.name}/${item.ecuModuleId}`"
          :title="`${item.name}/${item.ecuModuleId}`"
        >
          {{ `${item.name}/${item.ecuModuleId}` }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <!-- 原始版本 -->
    <a-form-model-item :label="$t('originalVersion')" prop="sourceVersion">
      <a-input
        :maxLength="50"
        v-model.trim="form.sourceVersion"
        :placeholder="$t('pleaseInput')"
      />
    </a-form-model-item>
    <!-- 原始包上传 -->
    <a-form-model-item :label="$t('原始包上传')" prop="originalFileInfo">
      <a-input
        ref="userNameInput"
        readOnly
        :value="originalFileInfo.fileObject.fileName"
        :placeholder="$t('pleaseUpload')"
      >
        <a-icon
          @click="$refs.uploadOriginalFile.upload()"
          slot="suffix"
          type="upload"
        />
      </a-input>
      <chunk-upload
        ref="uploadOriginalFile"
        :showDom="false"
        fileStoreField="fileObject"
        :recordData="originalFileInfo"
        uploadType="8"
        :userPartUrl="false"
        :size="20*1024*1024*1024"
      >
      </chunk-upload>
    </a-form-model-item>
    <!-- 目标版本 -->
    <a-form-model-item :label="$t('targetVersion')" prop="targetVersion">
      <a-input
        :maxLength="50"
        v-model.trim="form.targetVersion"
        :placeholder="$t('pleaseInput')"
      />
    </a-form-model-item>
    <!-- 目标包上传 -->
    <a-form-model-item :label="$t('目标包上传')" prop="targetFileInfo">
      <a-input
        ref="userNameInput"
        readOnly
        :value="targetFileInfo.fileObject.fileName"
        :placeholder="$t('pleaseUpload')"
      >
        <a-icon
          @click="$refs.uploadTargetFile.upload()"
          slot="suffix"
          type="upload"
        />
      </a-input>
      <chunk-upload
        ref="uploadTargetFile"
        :showDom="false"
        fileStoreField="fileObject"
        :recordData="targetFileInfo"
        uploadType="8"
        :userPartUrl="false"
        :size="20*1024*1024*1024"
      >
      </chunk-upload>
    </a-form-model-item>
    <a-form-model-item :label="$t('remark')" prop="remark">
      <a-textarea
        v-model="form.remark"
        :placeholder="$t('pleaseInput')"
        :rows="4"
        :maxLength="500"
      />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import ChunkUpload from '@/components/Upload/ChunkUpload'
import { checkVersionNameWithOutV } from '@/utils/validate'
import lodash from 'lodash'
export default {
  components: {
    ChunkUpload
  },
  props: {
  },
  data(){
    return {
      form:{
        ecuModuleId:undefined
      },
      // 原始包文件
      originalFileInfo: { fileObject: {} },
      targetFileInfo: { fileObject: {} },
      rules:{
        ecu: [{ required: true, message: this.$t('pleaseSelect') }],
        sourceVersion: [{ required: true, message: this.$t('pleaseInput') },
        { validator: checkVersionNameWithOutV(), trigger: ['change', 'blur'], required: true }],
        targetVersion: [{ required: true, message: this.$t('pleaseInput') },
        { validator: checkVersionNameWithOutV(), trigger: ['change', 'blur'], required: true }],
        originalFileInfo: [{ required: true, validator: (rule, value, callback) => {
          if (this.originalFileInfo.fileObject.fileId) {
            callback();
          } else {
            callback(new Error(this.$t('pleaseUpload') + this.$t('file')));
          }
        }}],
        targetFileInfo: [{ required: true, validator: (rule, value, callback) => {
          if (this.targetFileInfo.fileObject.fileId) {
            callback();
          } else {
            callback(new Error(this.$t('pleaseUpload') + this.$t('file')));
          }
        }}],
      },
      ecuList:[],
      isSearch: false,
    }
  },
  watch:{
    'originalFileInfo.fileObject.fileId'(val){
      val && this.$refs.ruleForm.clearValidate('originalFileInfo')
    },
    'targetFileInfo.fileObject.fileId'(val){
      val && this.$refs.ruleForm.clearValidate('targetFileInfo')
    },
  },
  methods:{
    getEcuList:lodash.debounce(function(value = '') {
      const vm = this
      vm.ecuList = []
      vm.isSearch = false
      if (value) {
        vm.$api
          .getAllEcu({ name: value.trim() })
          .then((res) => {
            if(res.data.length>0){
              vm.ecuList = res.data
            }else{
              vm.isSearch = true
            }
          })
      }
    },500),
    getFormData(){
      const vm = this
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (!valid) {
            reject(valid)
            return
          }
          const data = {...this.form}
          data.ecuName=this.form.ecu.split('/')[0]
          data.ecuModuleId=this.form.ecu.split('/')[1]
          data.sourceVersionFileId = vm.originalFileInfo.fileObject.fileId
          data.targetVersionFileId = vm.targetFileInfo.fileObject.fileId
          resolve(data)
        })
      })
    }
  }
}
</script>